<script setup>
    import { ref } from "vue";
    import tools from "../tools/index.js";

    // 父组件传入的数据：title导航内容，index当前导航索引
    const props = defineProps({
        title:{},
        index:{}
    })

    // 创建动态class
    const isActive = ref("");

    // 接收可能会被传入的当前选中的索引
    tools.E.on("getIndex", (i)=>{
        // 当前选中的索引是否是当前导航的索引，是：设置样式，否：没有样式
        isActive.value = i===props.index ? 'active' : '';
    })

</script>

<template>
    <div :class="['item', isActive]" >
        {{ props.title }}
    </div>
</template>

<style scoped>
.item{
    flex:1;
    text-align:center;
    line-height:50px;
    cursor: pointer;
}
.item.active{
    background:red;color:#fff;
}
</style>